import React, { Component } from 'react'
import { Card, Table, Tag, Space, Button } from 'antd';

import { getAllUsersAPI } from './../../apis/userAPI'
import AddUserModal from '../../components/addUserModal';
export default class index extends Component {
    state = {
        allRoles: [],
        allUsers: [],
        isModalVisible: false
    }

    showAddModal = (boo) => {
        this.setState({ isModalVisible: boo })
    }

    getAllUsers = async () => {
        const res = await getAllUsersAPI()
        console.log('getAllUsers()', res);
        this.setState({
            allUsers: res.data.data
        })
    }
    componentDidMount() {
        this.getAllUsers()

    }
    render() {
        const { allUsers, isModalVisible } = this.state
        const columns = [
            {
                title: '用户名称',
                dataIndex: 'account',
                key: 'account',
                render: text => <a>{text}</a>,
            },
            {
                title: '角色',
                dataIndex: 'role',
                key: 'role',
                render: role => role ? role.name : '暂无数据'
            },
            {
                title: '邮箱',
                dataIndex: 'email',
                key: 'email',

            },
            {
                title: '操作',
                render: rowData => (
                    <>
                        <Button >修改</Button>
                        &nbsp; &nbsp; &nbsp;
                        <Button>删除</Button>
                    </>
                ),
            },

        ];
        return (
            <div>
                <AddUserModal isModalVisible={isModalVisible} getAllUsers={this.getAllUsers} showAddModal={this.showAddModal}></AddUserModal>
                <Card title="角色管理" extra={<Button onClick={() => this.showAddModal(true)}>添加</Button>} style={{ width: "100%" }}>

                    <Table rowKey="_id" columns={columns} dataSource={allUsers} pagination={{ defaultPageSize: 5, showQuickJumper: true, showSizeChanger: true, pageSizeOptions: ['5', '10', '15', '20'] }} />

                </Card>
            </div>
        )
    }
}
